<script>
import { defineComponent } from "vue";
import moment from "moment";

export default defineComponent({
  name: "CarManagement",
  data() {
    return {
      deName: "",
      deId: "",
      carId: "",
      carName: "",
      keyWords: "",
      changeId: "",
      changeName: "",
      carInfo: [
        {
          Id: "1",
          Name: "奔驰",
          carTime: new Date()
        },
        {
          Id: "2",
          Name: "宝马",
          carTime: new Date()
        },
        {
          Id: "3",
          Name: "奥迪",
          carTime: new Date()
        },
        {
          Id: "4",
          Name: "凯迪拉克",
          carTime: new Date()
        },
        {
          Id: "5",
          Name: "QQ",
          carTime: new Date()
        },
        {
          Id: "6",
          Name: "老头乐",
          carTime: new Date()
        }
      ]
    };
  },
  methods: {
    setInfo(){
      localStorage.setItem('carInfo',JSON.stringify(this.carInfo));
    },
    addInfo() {
      let obj = {
        Id: this.carId,
        Name: this.carName,
        carTime: new Date()
      };
      this.carId === "" || this.carName === "" ?
        alert("信息不能为空") : this.carInfo.some(item => this.carId === item.Id) ?
          alert("id重复") : this.carInfo.push(obj);
      this.setInfo();
      this.carId = "";
      this.carName = "";
    },
    search() {
      return this.carInfo.filter(item => item.Name.includes(this.keyWords));
    },
    removeCar(n) {
      this.deName = n.Name;
      this.deId = this.carInfo.indexOf(n);

    },
    sureDe() {
      this.carInfo.splice(this.deId, 1);
      this.setInfo();
    },
    changeCar(n) {
      this.deName = n.Name;
      this.deId = n.Id;
    },
    sureChange() {
      var flag = true;
      if (this.changeName === "" || this.changeId === "") {
        alert("信息不能为空!");
      } else {
        this.carInfo.forEach(item => {
          if (item.Id === this.changeId) {
            flag = false;
            alert("id重复!");
          }
        });
        if (flag) {
          var thisCar = this.carInfo.filter(item => item.Id === this.deId);
          thisCar[0].Id = this.changeId;
          thisCar[0].Name = this.changeName;
          alert("修改成功");
          this.setInfo();
        }

      }
      this.changeId = "";
      this.changeName = "";
    }
  },
  filters: {
    setTime(data, format) {
      //  var year=data.getFullYear();
      //  var month=(data.getMonth()+1).toString().padStart(2,0);
      //  var day=(data.getDate()+1).toString().padStart(2,0);
      //  var hour=(data.getHours()+1).toString().padStart(2,0);
      //  var min=(data.getMinutes()+1).toString().padStart(2,0);
      //  var sec=(data.getSeconds()+1).toString().padStart(2,0);
      // return format.replace('YYYY',year).replace('MM',month).replace('DD',day).replace('hh',hour).replace('mm',min).replace('ss',sec);
      return moment(data).format(format);
    }
  },
  created() {
   this.carInfo=JSON.parse(localStorage.getItem('carInfo')) || this.carInfo;

  }
});
</script>

<template>
  <div class="container">
    <!-- 按钮：用于打开模态框 -->


    <!-- 模态框 -->
    <div class="modal fade" id="myModal" style="margin-top: 200px">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">删除信息</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            确定要删除<span style="font-weight: 900;font-size: 30px;color: red">{{ deName }}</span>的信息吗？
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="sureDe">确认</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>

        </div>
      </div>
    </div>

    <!--    修改信息的模态框-->
    <div class="modal fade" id="myModal_1" style="margin-top: 100px">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">修改信息</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            <p><span style="margin-left: 100px">原ID:<span style="font-weight: 900;font-size: 30px;color: red">{{ deId }}</span></span><span
              style="margin-left: 100px">原Name:<span style="font-weight: 900;font-size: 30px;color: red">{{ deName }}</span></span></p>
            <label for="email" class="mr-sm-2">新ID:</label>
            <input type="text" class="form-control mb-2 mr-sm-4" id="email" v-model="changeId" />
            <label for="pwd" class="mr-sm-2">新Name:</label>
            <input type="text" class="form-control mb-2 mr-sm-4" id="pwd" v-model="changeName" />
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="sureChange">确认</button>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>

        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header">
        <form class="form-inline" action="">
          <label for="email" class="mr-sm-2">ID:</label>
          <input type="text" class="form-control mb-2 mr-sm-4" id="email" v-model="carId" />
          <label for="pwd" class="mr-sm-2">Name:</label>
          <input type="text" class="form-control mb-2 mr-sm-4" id="pwd" v-model="carName" />
          <button type="button" class="btn btn-primary mb-2" @click="addInfo">添加</button>
          <label for="add" style="margin-left: 20px" class="mr-sm-2">搜索:</label>
          <input type="text" class="form-control mb-2 mr-sm-4" id="add" v-model="keyWords" @change="search" />
        </form>
      </div>
      <div class="card-body">
        <table class="table table-striped">
          <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>CreatTime</th>
            <th style="padding-left: 20px">Operation</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in search()" :key="item.Id">
            <td>{{ item.Id }}</td>
            <td>{{ item.Name }}</td>
            <td>{{ item.carTime |setTime("YYYY/MM/DD hh:mm:ss") }}</td>
            <button type="button" class="btn btn-danger" style="margin-right: 10px;margin-top: 5px" @click="removeCar(item)"
                    data-toggle="modal" data-target="#myModal">删除
            </button>
            <button type="button" class="btn btn-warning " style="margin-top: 5px" @click="changeCar(item)"
                    data-toggle="modal" data-target="#myModal_1">修改
            </button>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less"></style>
